<template>
  <page-container>
    <search-form
      v-model="searchForm"
      :searchColumns="searchColumns"
      :searchOptions="{ menuSpan: 5 }"
      @on-search="handleSearch">
      <template v-slot:newBtn>
        <el-button
          type="success"
          @click="handleExport"
          >导出</el-button
        >
      </template>
    </search-form>

    <avue-table
      :dataList="dataList"
      :loading="loading"
      :page="page"
      :tableColumns="tableColumns"
      :tableOptions="{ menuWidth: 80 }"
      @onPageChange="onPageChange">
      <template v-slot:menu="{ row }">
        <el-button
          type="primary"
          icon="el-icon-edit"
          circle
          @click="handleView(row)">
        </el-button>
      </template>
      <template v-slot:film_name="{ row }">
        <span
          class="text-simpel"
          @click="handleSimpelView(row)"
          >{{ row.film_name }}</span
        >
      </template>
    </avue-table>
  </page-container>
</template>

<script>
import tableMixins from '@/mixins/table'
import { deepClone } from '@/utils'
import { mapGetters } from 'vuex'
import { searchColumns, tableColumns } from './config/table-config'
import { queryFilmList } from '@/api/databoard'

export default {
  mixins: [tableMixins],
  data() {
    return {
      actionType: 'add',
      dataList: [],
      childList: [],
      searchForm: {
        dateRange: [this.$startStamp(new Date()), this.$endStamp(new Date())],
      },
      editForm: {},
    }
  },
  computed: {
    ...mapGetters(['commonData', 'channelList']),
    userList() {
      return this.commonData?.userList ?? []
    },
    searchColumns,
    tableColumns,
  },
  methods: {
    fetchMethod: queryFilmList,

    // 查询参数格式化
    formatSearch() {
      const searchParams = deepClone(this.searchForm)
      const [start, end] = this.searchForm.dateRange
      searchParams.start = start && this.$dayjs(this.$startStamp(start)).unix()
      searchParams.end = end && this.$dayjs(this.$endStamp(end)).unix()
      delete searchParams.dateRange
      return searchParams
    },
    // 点击导出
    async handleExport() {
      const allData = await this.queryAllData(this.page.total)

      const colums = this.tableColumns.filter(item => {
        return item.prop !== 'Id'
      })

      const originList = deepClone(allData)
      const exportDataList = originList.map((item, index) => {
        Object.entries(item).forEach(([key, value]) => {
          if (key === '$index') {
            item[key] = index + 1
          }
          if (key === 'date') {
            item[key] = this.$formatTime(value)
          }
          if (key === 'keywords_name') {
            item[key] = item?.keywords_name?.map(it => it.name).join(',')
          }
          if (key === 'view_count') {
            item[key] = `${item?.view_count}次`
          }
          if (key === 'purchase_count') {
            item[key] = `${item?.purchase_count}次`
          }
        })
        return item
      })
      this.$Export.excel({
        title: '影片数据列表',
        columns: colums,
        data: exportDataList,
      })
    },
    async queryAllData(pageSize) {
      this.addDataList = []

      const searchParams = this.formatSearch()
      const queryParams = {
        ...searchParams,
        page: this.page.currentPage,
        page_size: pageSize,
      }

      const { data } = await this.fetchMethod(queryParams)
      return data?.list ?? []
    },
    // 表格操作
    handleView(row) {
      this.$router.push({
        path: '/dashboard/simple_film',
        query: { name: row?.film_name, id: row?.film_id },
      })
    },
    handleSimpelView(row) {
      this.$router.push({
        path: '/dashboard/film_detail',
        query: { name: row?.film_name, id: row?.film_id },
      })
    },
  },
  mounted() {
    this.handleSearch()
  },
}
</script>

<style lang="scss" scoped>
.text-simpel {
  cursor: pointer;
  color: var(--theme) !important;
}
</style>
